<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
<title>Dynamic Context Menus - Example of Bubbling technique</title>
<meta name='author' content='Caridy Patino (caridy at gmail.com)' />
<!-- Reset and Fonts -->
<link rel="stylesheet" type="text/css" href="../assets/example.css">
<!-- YUI Basement Style -->
<link rel="stylesheet" type="text/css" href='http://yui.yahooapis.com/2.2.2/build/container/assets/container.css'/>
<link rel="stylesheet" type="text/css" href='http://yui.yahooapis.com/2.2.2/build/menu/assets/menu.css'/>
<link rel="stylesheet" type="text/css" href='http://yui.yahooapis.com/2.2.2/build/button/assets/button.css'/>
<link rel="stylesheet" type="text/css" href='../../../yui-cms/build/feeds/assets/feeds.css'/>
<link rel="stylesheet" type="text/css" href='../../../yui-cms/build/bookmarks/assets/bookmarks.css'/>
<!-- YUI Library -->
<script type="text/javascript" src='http://yui.yahooapis.com/2.2.2/build/utilities/utilities.js'></script>
<script type="text/javascript" src='http://yui.yahooapis.com/2.2.2/build/container/container-min.js'></script>
<script type="text/javascript" src='http://yui.yahooapis.com/2.2.2/build/menu/menu-min.js'></script>
<script type="text/javascript" src='http://yui.yahooapis.com/2.2.2/build/button/button-beta-min.js'></script>
<!-- YUI-CMS Library -->
<script type="text/javascript" src='../../../yui-cms/build/bubbling/bubbling.js'></script>
<script type="text/javascript" src='../../../yui-cms/build/ext/json.js'></script>
<script type="text/javascript" src='../../../yui-cms/build/translator/translator.js'></script>
<!-- Bubbling Library default behaviors for context menus -->
<script type="text/javascript">
  // creating the button instance
  YAHOO.util.Event.onContentReady('linkbutton1', function () {
    var oLinkButton1 = new YAHOO.widget.Button("linkbutton1");	
  });
  YAHOO.util.Translator.init ({lang:'esp', charset:'iso-8859-1'});
</script>
<script type="text/javascript" src='../../../yui-cms/build/feeds/feeds.js'></script>
<script type="text/javascript" src='../../../yui-cms/build/bookmarks/bookmarks.js'></script>
<!-- Custom Styles -->
</head>
<body id="cms-body">
  <div id="doc">
	
	<div class="path">
	  <a href="http://bubbling.comarq.com/" target="_top">Bubbling Library</a> &gt; <a href="http://bubbling.comarq.com/eng/examples" target="_top">Examples</a>
	</div>

	<h2>Examples of Using the Bubbling Technique for Context Menus </h2>
	
	<p>Benefit from the bubbling technique: Include the corresponding behavior for each context menu can improve the  website functionality without worry about the listeners for each element with a  context menu attached:</p>
	
	<h3>Dynamic Context Menu Example for RSS+Feed links</h3>
	<p>
	Click on the icon to Bookmark this this page <a href="/eng/class/examples/behaviors/properties/rss/" class="actionRSSFeed" title="Properties - Related behaviors with the &quot;right click&quot; event over an element..."><img src="/themes/bubbling/images/rss/feed.gif" alt=""></a>
	</p>
	
	<div id="syndicate">

		<h3>YUIBlog.com Syndication Examples</h3>
		<ul>
			<li>All Entries:<br>
			<a href="http://feeds.yuiblog.com/YahooUserInterfaceBlog" class="actionRSSFeed"><img src="http://us.i1.yimg.com/us.yimg.com/i/us/ext/rss.gif" alt="View RSS Feed" title="View RSS Feed" align="middle" border="0" height="17" width="36"></a></li>
			<li>All Comments:<br>
			<a href="http://feeds.yuiblog.com/CommentsForYahooUserInterfaceBlog" class="actionRSSFeed"><img src="http://us.i1.yimg.com/us.yimg.com/i/us/ext/rss.gif" alt="View RSS Feed" title="View RSS Feed" align="middle" border="0" height="17" width="36"></a></li>
		</ul>

	</div>				
	
	<p>
	Example link: Click here to Bookmark the <a href="http://feeds.yuiblog.com/YahooUserInterfaceBlog" class="actionBookmark" title="YUI Official Sebsite">YUI - Yahoo! User Interface</a>
	</p>
	
	<h3>Dynamic Context Menu Example for Bookmark links</h3>
	<p>
	Click on the icon to Bookmark this this page <a href="/eng/class/examples/behaviors/properties" class="actionBookmark" title="Examples > Behaviors > Properties"><img src="images/bookmark.gif" alt=""></a>
	</p>
	<p>
	Button link: 
	<span id="linkbutton1"><span class="first-child"><a href="http://developer.yahoo.com/yui/" class="actionBookmark" title="YUI Official Sebsite">YUI - Yahoo! User Interface</a></span></span> 
	</p>
	
	<p>The most common technique for apply context menus to the large number of links is the use of &quot;getElementByTagName&quot;, processing each tag and creating one instance of the context menu object attached to each tag. This pre-processing can freeze your browser, and create memory leaks when you are using dynamic areas. With the bubbling technique we can guarantee the success without worry about dynamic areas. Also we don&acute;t need to refer a link directly using the tabName or an unique ID to create the corresponding context menu object, decreasing the count of links with ID included inside the XHTML code. </p>
    <p>This implementation has only two  instance of the context menu object (Feed Context Menu and Bookmark Content Menu) for the document, decreasing the memory usage and rendering in realtime each &quot;click&quot; or &quot;right click&quot; event.</p>
  </div>



</body>
</html>